<template>
  <!-- 展示没有支付的订单 -->
  <div class="headers">
    <div class="footer">
      <table border="1px" cellspacing="0">
        <tr align="center">
          <td>编号</td>
          <td>商家</td>
          <td>商品</td>
          <td>地址</td>
          <td>总价格</td>
          <td>总数量</td>
          <td>订单状态</td>
          <td>操作</td>
        </tr>
        <tr v-for="(i, index) in list" :key="index" align="center">
          <td>{{ i.id }}</td>
          <td>{{ i.shops_name }}</td>
          <td>{{ i.goods_name }}</td>
          <td>{{ i.address_name }}</td>
          <td>{{ i.total_amount }}</td>
          <td>{{ i.total_count }}</td>
          <td>{{ i.pay_state }}</td>
          <td>
            <van-button type="primary" color="red" @click="notpay(i.id)"
              >取消支付</van-button
            >
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      user_id: localStorage.getItem("id"),
    };
  },
  methods: {
    // 获取用户未支付订单
    submit: function () {
      this.myaxios(this.weburl + "user/ordernot/", "get", {
        user_id: this.user_id,
      }).then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.list = data.data;
          console.log(this.list);
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    // 取消支付订单
    notpay: function (id) {
      this.myaxios(this.weburl + "user/order_details/" + id, "delete", {
        user_id: this.user_id,
      }).then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.submit()
          this.$toast.success(data.msg);
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
  created() {
    this.submit();
  },
};
</script>

<style scoped>
.headers {
  widows: 100%;
  height: 100%;
}
</style>